<template>
  <div class="music">
    <div class="middle">

			<div class="mainWrap">

				<div class="leftBar">

					<ul class="menuUL">

						<li class="menuLi cur">

							<a href="#">

								<i class="icon iplay"></i>

								正在播放

							</a>

						</li>

						<li class="menuLi">

							<a href="#">

								<i class="icon ihst"></i>

								播放历史

							</a>

						</li>

						<li class="menuLi">

							<a href="#">

								<i class="icon ishouc"></i>

								我收藏的单曲

							</a>

						</li>

					</ul>

					<div class="collectOut">

						<span class="colS">我创建的精选集</span>

						<a href="#" class="colA"></a>

					</div>

					<div class="cellectList"></div>

					<audio id="audio" src="songs/1.mp3"></audio>

				</div>

				<div class="mainBody">

					<div class="playHd">

						<div class="phInner">

							<div class="col">歌曲(50)</div>

							<div class="col">演唱者</div>

							<div class="col">专辑</div>

						</div>

					</div>

					<div class="playBd">

						<div class="scrollView">

							<!-- <div class="scroll"></div> -->

							<ul class="songUL">

								<li class="songList">

									<div class="songLMain">

										<div class="check">

											<input class="checkIn" type="checkbox" select="0">

										</div>

										<div class="start">

											<em sonN="1">1</em>

										</div>

										<div class="songBd">

											<div class="col colsn">盛夏光年</div>

											<div class="col colcn">陈冰</div>

											<div class="col">好声音第三季</div>

										</div>

										<div class="control">

											<a class="cicon love"></a>

											<a class="cicon more" style="display:none"></a>

											<a class="cicon dele" style="display:none"></a>

										</div>

									</div>

								</li>

								<li class="songList">

									<div class="songLmain">

										<div class="check">

											<input class="checkIn" type="checkbox" select="0">

										</div>

										<div class="start">

											<em sonN="2">2</em>

										</div>

										<div class="songBd">

											<div class="col colsn">漂洋过海来看你(Live)</div>

											<div class="col colcn">刘明湘</div>

											<div class="col">好声音第三季</div>

										</div>

										<div class="control">

											<a class="cicon love"></a>

											<a class="cicon more"></a>

											<a class="cicon dele"></a>

										</div>

									</div>

								</li>

								<li class="songList">

									<div class="songLmain">

										<div class="check">

											<input class="checkIn" type="checkbox" select="0">

										</div>

										<div class="start">

											<em sonN="3">3</em>

										</div>

										<div class="songBd">

											<div class="col colsn">Autobots Reunite</div>

											<div class="col colcn">Steve Jablonsky</div>

											<div class="col">《变形金刚4：绝迹重生》</div>

										</div>

										<div class="control">

											<a class="cicon love"></a>

											<a class="cicon more"></a>

											<a class="cicon dele"></a>

										</div>

									</div>

								</li>

								<li class="songList">

									<div class="songLmain">

										<div class="check">

											<input class="checkIn" type="checkbox" select="0">

										</div>

										<div class="start">

											<em sonN="4">4</em>

										</div>

										<div class="songBd">

											<div class="col colsn">Halo</div>

											<div class="col colcn">Martin</div>

											<div class="col">Halo Legends: Original Soundtrack</div>

										</div>

										<div class="control">

											<a class="cicon love"></a>

											<a class="cicon more"></a>

											<a class="cicon dele"></a>

										</div>

									</div>

								</li>
							</ul>

						</div>

					</div>

					<div class="playFt">

						<div class="track">

							<div class="uiCheck">

								<input class="checkAll" type="checkbox" select="0">

							</div>

							<div class="uiItem">

								<a href="#" class="itIcon itDele">删除</a>

							</div>

							<div class="uiItem">

								<a href="#" class="itIcon itShou">收藏</a>

							</div>

							<div class="uiItem">

								<a href="#" class="itIcon itJin">添加到精选集</a>

							</div>

							<div class="uiItem">

								<a href="#" class="itIcon itMore">更多</a>

							</div>

						</div>

					</div>

				</div>

				<div class="mainOuther">

					<div class="albumCover">

						<a href="#">

							<img src="images/2.jpg" id="canvas1">

						</a>

					</div>

					<div class="albumSale">

						<a href="#" class="asA">

							<img src="">

						</a>

					</div>

					<div id="lyr"></div>

				</div>

			</div>

		</div>
  </div>
</template>
<script>
export default {
    
}
</script>
<style lang='stylus' scoped>
.music
  width 61%
  margin 20px auto
  .el-row
    width 100%
</style>